
<template>
<!-- 添加计划 -->
  <div class="AddPlan">
       <div class="side_1"></div>
      <span class="add_1"> 接待计划</span>
 <el-button type="info" icon="el-icon-back" class="btn_fanhui" @click="Fh">返回</el-button>
<div class="body">
  <div class="form_body">
          <el-form  :inline="true"  :model="plan" ref="plan" label-width="150px" >
       <div class="div_title">
         <span >接待计划</span>
       </div>
     
          <div class="f1">
       <el-form-item label="计划编制日期" >
         <el-date-picker type="date" v-model="plan.date"></el-date-picker>
        </el-form-item>
    <el-form-item label="参与部门" >
             <el-select v-model="value">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
        </el-form-item>

   <el-form-item label="来访目的">
          <el-input placeholder="请输入目的"></el-input>
        </el-form-item>
          </div>
          <div class="f2">
                  <el-form-item label="接待级别" >
             <el-select v-model="value_0" >
    <el-option
      v-for="item in level"
      :key="item.value_0"
      :label="item.label"
      :value="item.value_0">
    </el-option>
  </el-select>
        </el-form-item>
                <el-form-item label="参与人员">
          <el-input placeholder="请输入人数"></el-input>
        </el-form-item>
  <el-form-item label="来访人员及职务">
          <el-input placeholder="请输入人名及职务"></el-input>
        </el-form-item>
          </div>
          <div class="f3">
      <el-form-item label="联系方式">
          <el-input placeholder="请输入联系方式"></el-input>
        </el-form-item>
     

              <el-form-item label="接待单位及总协调人"  >
          <el-input placeholder="请输入单位及姓名" ></el-input>
        </el-form-item>

              <el-form-item label="背景介绍">
          <el-input placeholder="请输入背景"></el-input>
        </el-form-item>
       </div>

          </el-form>
  </div>

            <div class="div_title_1">
         <span >日程安排</span>

       </div>
<div class="el-table-body">
       <el-table border style="width:70%;margin-left:15%"  :data="tableData">
         <el-table-column label="日期" align="center">
             <el-date-picker type="date" v-model="tableData.Date"></el-date-picker>
         </el-table-column>
            <el-table-column label="时间" prop="" align="center">
             <el-input ></el-input>
         </el-table-column >
         <el-table-column label="内容" align="center">
           <el-input></el-input>
         </el-table-column>
          <el-table-column label="地点" align="center">
           <el-input></el-input>
         </el-table-column>
         <el-table-column label="参与领导及部门" align="center">
                  <el-select v-model="value_d">
    <el-option
      v-for="item in departs"
      :key="item.value_d"
      :label="item.label"
      :value="item.value_d">
    </el-option>
  </el-select>
         </el-table-column>
         <el-table-column label="配合单位" align="center">  
           <el-input></el-input>
         </el-table-column>
       
           <el-table-column label="备注" align="center">  
           <el-input></el-input>
         </el-table-column>
       </el-table>
 
 
   
  </div>
     </div>
       <div class="btn_bottom">
           <el-button type="primary" size="medium" @click="queDing">确定</el-button>
           <el-button type="info"  size="medium" @click="quXiao">返回</el-button>
     </div>
  </div>
</template>

<script>

export default {
  data(){
    return{
       value_d:'',
      plan:{
        date:''
      },
      options: [{
          value: '选项1',
          label: '行政部'
        }, {
          value: '选项2',
          label: '采购'
        }, 
        ],
         level: [{
          value_0: '选项1',
          label: 'A'
        }, {
          value_0: '选项2',
          label: 'B'
        }, 
        ],
      value:'',
      value_0:'',
      tableData:[
        {
         Time:''
         
        }
      ],
     
     departs:[
         {
         value_d:'选项1',
         label:'行政部'
      },
        {
        value_d:'选项2',
        label:'技术部'
        }
      ],
       
    }
  },
     methods:{
      Fh(){
          window.history.go(-1);
      },
        queDing(){
     window.history.go(-1);
   },
   quXiao(){
     window.history.go(-1);
   },
    }
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/base.scss";
.body{
  
    width: 98%;
    // height: 800px;
    background-color: $white;
    margin-left: 10px;
    margin-top: 50px;
    overflow: hidden;
}

.side_1{
    width:5px;
    height: 16px;
    background-color: $Header_color;
    margin-left: 10px;
    margin-top: 30px;
}
.add_1{
   margin-left: 20px;
  margin-top: -20px;
   float: left;
   font-size: 18px;
   font-weight: 400
   

}
.btn_fanhui{
    margin-top: -20px;
   margin-right: 20px;
    float:right;
}

.form_body{
    margin-top: 30px;
     border: 1px solid  rgb(238, 232, 232);
     height:350px;
     width:70%;
     margin-left: 15%;
 
}
.el-form-item{
    margin-top: 20px;
   
}
.div_title{
  border-bottom: 1px solid  rgb(238, 232, 232);
  height:80px;
  line-height: 80px;
  text-align: center;
  font-size: 18px;
  color:#333333;
  font-weight: 700;
}
.div_title_1{
    border-left: 1px solid  rgb(238, 232, 232);
    border-right: 1px solid  rgb(238, 232, 232);
  height:80px;
  line-height: 80px;
  text-align: center;
  font-size: 18px;
  color:#333333;
  font-weight: 700;
  width: 70%;
  margin-left: 15%;
}

.btn_bottom{
  margin-top: 30px;
  margin-left: 45%;
}
.span_text_1{
  margin-left: 20px;
}
.f1
{
  width: 33%;
  float: left;
}
.f2{
   width: 33%;
  float: left;
}
.f3{
   width: 33%;
  float: left;
}

   .el-select{
    width:93%
  }

.el-table-body{
  margin-bottom: 50px;
}
</style>